<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>微信JS-SDK Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

</head>

<body ontouchstart="">

    <button id="addPic">添加图片</button>
    <ul id="picList"></ul>


    <div class="wxapi_container">
        <div class="lbox_close wxapi_form">
            <h3 id="menu-basic">基础接口</h3>
            <span class="desc">判断当前客户端是否支持指定JS接口</span>
            <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>

            <button class="btn btn_primary" id="getParams">支付测试</button>

            <h3 id="menu-pay">微信支付接口</h3>
            <span class="desc">发起一个微信支付请求</span>
            <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
        </div>
    </div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 使用 jq 动态加载 微信配置


/*$('#getParams').on('click', function() {
    $.ajax({
        url: '/api/getPaymentParams' // 此处url请求地址需要替换成你自己实际项目中服务器数字签名服务地址
        ,
        type: 'post',
        data: {
        }
    }).done(function(r)
    {
        alert(JSON.stringify(r));
    })
});*/

$.ajax({
    url: '/api/getJsConfig' // 此处url请求地址需要替换成你自己实际项目中服务器数字签名服务地址
        ,
    type: 'post',
    data: {
        url: location.href.split('#')[0] // 将当前URL地址上传至服务器用于产生数字签名
    }
}).done(function(r) {
    // 返回了数字签名对象
    alert(JSON.stringify(r));
    r= r.result
    // 开始配置微信JS-SDK
    wx.config({
        debug: true,
        appId: r.appId,
        timestamp: r.timestamp,
        nonceStr: r.nonceStr,
        signature: r.signature,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'playVoice',
            'onVoicePlayEnd',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    }
    );

    // 调用微信API
    wx.ready(function() {
        var sdata = {
            title: '那年|测试微信分享及相关API',
            desc: '那年|测试微信分享及相关API',
            link: 'http://game.4gshu.com/deep-love/index2.html',
            imgUrl: 'http://game.4gshu.com/xuangedan/other-project/2015-01-06/img/share-wx-logo.jpg',
            success: function() {
                alert('用户确认分享后执行的回调函数');
            },
            cancel: function() {
                alert('用户取消分享后执行的回调函数');
            }
        };
        wx.onMenuShareTimeline(sdata);
        wx.onMenuShareAppMessage(sdata);
        document.querySelector('#addPic').onclick = function () {
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                }
            });
        }

                document.querySelector('#chooseWXPay').onclick = function () {
                    wx.chooseWXPay({
                        timestamp: 1414723227,
                        nonceStr: 'noncestr',
                        package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK&notify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
                        paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69',
                        success: function(res) {
                       alert('success');
                        },
                        fail:function()
                        {
                            alert('fali');
                        }
                    });
                };
    }
    );



    wx.error(function(res){

     //   alert('error');
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

    });
});

</script>


</html>
